<template>
	<div >
		<div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
	
			<!-- <buttonOne :title="'注册'"/> -->
			<!-- <buttonTwo :title="'登录'"/> -->
			<!-- <buttonThree /> -->
		<!-- <lamp></lamp> -->
		<!-- <snow></snow> -->
		<!-- canvas id="canvas"></canvas> -->
	</div>
</template>

<script>
	export default {
		name: 'dataexhibition',
		components: {},
		data: () => ({
 canvas : document.querySelector("#canvas")
		}),
		mounted() {
			this.data()
			// this.win();
		},
		methods: {
			data() {
				//this.$root => app
		 		let myChart = this.$root.echarts.init(
					document.getElementById("myChart")
				);
				// 绘制图表
				myChart.setOption({
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line'
					}]
				}); 
			}
			/* resizeCanvas() {
				this.canvas.width = window.innerWidth;
				this.canvas.height = window.innerHeight;
			},
			star(x, y, r, l, rot) {
				ctx.beginPath();
				for (let i = 0; i < 5; i++) {
					ctx.lineTo(Math.cos((18 + i * 72 - rot) * Math.PI / 180) * r + x,
						-Math.sin((18 + i * 72 - rot) * Math.PI / 180) * r + y);
					ctx.lineTo(Math.cos((54 + i * 72 - rot) * Math.PI / 180) * l + x, -Math.sin((54 + i * 72 - rot) * Math.PI / 180) *
						l + y);
				}
				ctx.closePath();
			},
			draw() {
				for (let i = 0; i < arr.length; i++) {
					let temp = arr[i];
					star(temp.x, temp.y, temp.r, temp.r * 3, temp.rot);
					ctx.fillStyle = temp.color;
					ctx.strokeStyle = temp.color;
					ctx.lineWidth = 0.1;
					ctx.lineJoin = "round";
					ctx.fill();
					ctx.stroke();
				}
			},
					update() {
						for (let i = 0; i < arr.length; i++) {
							arr[i].x += arr[i].dx;
							arr[i].y += arr[i].dy;
							arr[i].rot += arr[i].td;
							arr[i].r -= 0.015;
							if (arr[i].r < 0) {
								arr.splice(i, 1);
							}
						}
					},		
			win(){
				debugger
				window.addEventListener('load', () => {
					
					var ctx = this.canvas.getContext("2d");
					window.onresize = resizeCanvas();
				
					
				
					this.resizeCanvas();
					this.canvas.style.cssText = `
				    position: fixed;
				    z-index: 1000;
				    pointer-events: none;
				    `
					//
					var arr = [];
					var colours = ["#ffff00", "#66ffff", "#3399ff", "#99ff00", "#ff9900"];
				
					//
					window.addEventListener('mousemove', e => {
				
						arr.push({
							x: e.clientX,
							y: e.clientY,
							r: Math.random() * 0.5 + 1.5,
							td: Math.random() * 4 - 2,
							dx: Math.random() * 2 - 1,
							dy: Math.random() * 1 + 1,
							rot: Math.random() * 90 + 90,
							color: colours[Math.floor(Math.random() * colours.length)]
						});
				
					})
					//
					 
					//
					 
					//
					
				
				
					setInterval(() => {
						ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
						this.draw();
						this.update();
					}, 20)
				})
				
			} */
			
			
			
			
		}
	}
</script>

<style >
 
</style>
